<template>
  <div class="container">
    <el-dialog
      title="调整部门"
      :visible.sync="showAdjustDepartment"
      :before-close="cancelAdjust"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div>
        <el-row class="custom-tree-container clearfix" :gutter="20">
          <!-- 树形结构部分 -->
          <el-col :span="12" class="block fl treeStyle paddingTop">
            <el-tree
              :data="getTreeData"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              :render-content="renderTree"
              @node-click="adjust"
            >
            </el-tree>
          </el-col>
          <!-- 树形结构部分 -->
          <el-col :span="12" class="block fl treeStyle">
            <div class="selectDepart">
              <div class="departTitle">已选择部门</div>
              <div v-if="isShowDepartment" class="department" id="department">
                <span
                  ><i class="icon iconfont iconxuanzebumen icon"></i
                  >&nbsp;&nbsp;&nbsp;{{ departmentName }}</span
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelAdjust" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="adjustDepart"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      departmentName: '',
      isShowDepartment: false,
      orgId: '',
      orgName: '',
      canLogin: false,
    }
  },
  //搜索条件
  props: ['showAdjustDepartment', 'getTreeData', 'checkedId', 'gitListData'],

  methods: {
    renderTree(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{data.orgName}</span>
        </span>
      )
    },
    // tree点击事件
    adjust(data, node, vuecomponent) {
      // this.$nextTick(function() {
      //    Velocity($("#department"), { opacity: 1, fontSize: '1.3em' }, { duration: 300 })
      //    Velocity($("#department"), { opacity: 1, fontSize: '1em' }, { duration: 300 })
      // });
      this.isShowDepartment = true
      this.departmentName = data.orgName
      this.orgId = data.id
      this.orgName = data.orgName
      //   this.menuVisible = false;
    },
    // 部门调整保存
    adjustDepart() {
      this.canLogin = true
      if (this.orgId == '' || this.orgId == null) {
        this.canLogin = false
        this.$message({
          type: 'warning',
          message: '请选中需要调整的部门',
        })
        return false
      }
      this.checkedId = $.unique(this.checkedId.sort())
      this.axios({
        method: 'post',
        url: 'api-e/nc/contract/expand/setorg',
        data: {
          orgId: this.orgId,
          contractIds: this.packageParams(this.checkedId),
          orgName: this.orgName,
        },
      })
        .then((response) => {
          this.canLogin = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: response.data.msg,
            })
            this.$emit('isShowState', false)
            this.isShowDepartment = false
            this.$emit('checkIds', [])

            this.gitListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.canLogin = false
        })
    },
    // 取消调整部门
    cancelAdjust() {
      this.$emit('isShowState', false)
      this.isShowDepartment = false
      // this.$emit("checkIds",[])
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .treeStyle {
    height: 300px;
    overflow-y: auto;
    background: #ebf0f5;
  }
  .paddingTop {
    padding-top: 6px;
  }
  /deep/ .el-dialog {
    width: 600px !important;
  }
  .selectDepart {
    padding: 12px;
    padding-top: 0;
    .departTitle {
      font-size: 14px;
      line-height: 36px;
      color: #999;
      border-bottom: 1px solid #dee5f4;
    }
    .department {
      transform-origin: left;
      overflow: hidden; /*超出的部分隐藏起来。*/
      white-space: nowrap; /*不显示的地方用省略号...代替*/
      text-overflow: ellipsis; /* 支持 IE */
      margin-top: 10px;
      .icon {
        color: #009588;
        font-size: 14px;
        vertical-align: middle;
      }
    }
  }
}
</style>
